import React, { useState, useEffect } from 'react';
import {View, Image, Block} from '@tarojs/components'
import './city-labels.scss'
import {CityLabelsItem} from '../../utils/server.interface'
import {gotoPage} from '../../utils/tools'

const CityLabels: React.FC<{ data: CityLabelsItem[] }> = (props) => {
  const [labels, setLabels] = useState<CityLabelsItem[]>([])
  useEffect(() => {
    const labelArr = props.data
    let blank: any = []
    if (labelArr && labelArr.length > 0) {
      const length = labelArr.length
      const num = length % 2
      if (num > 0) {
        blank = Array(2 - num).fill({})
      }
    }
    setLabels(labelArr.concat(blank))
  }, [props.data])
  return (
    <View className='city-labels'>
      {labels.length > 0 && labels.map((item, index) => <View className='label-item' key={item.id} onClick={() => {
          gotoPage(item.link)
        }}
      >
          {item && <Block>
            {item.is_pure_graph ?
              <View className='img-box-width'>{item.img &&
              <Image className='img' src={item.img} mode='aspectFill' />}</View>
              :
              <Block>
                <View className='img-box'>{item.img &&
                <Image className='img' src={item.img} mode='aspectFit' />}</View>
                <View className='title-box'>
                  <View className='title'>{item.label_name || ''}</View>
                  <View className='des'>{item.summary || ''}</View>
                </View>
              </Block>
            }
          </Block>}
        </View>
      )}
    </View>
  )
}
CityLabels.defaultProps = {
  data: []
}
export default CityLabels
